<template>
  <div>
    <Search/>
    <div class="settle-table w">
        <div class="settle-title">
          <Row>
            <Col span="2">
              <Checkbox v-model="allSelected"  @on-change="selectAll" size="large">{{$t('全选')}}</Checkbox>
            </Col>
            <Col span="8">{{$t('商品')}}</Col>
            <Col span="4">{{$t('价格')}}</Col>
            <Col span="4">{{$t('购买数量')}}</Col>
            <Col span="3">{{$t('订单金额')}}</Col>
            <Col span="3">{{$t('操作')}}</Col>
          </Row>
        </div>
        <div v-if="cartList.length">
          <CartItem v-for="(item,i) in cartList" :shopIndex="i" :item="item" :key="`cartItem-${i}`" @deleteCart="getdelcart" @cartNumChange="cartNumChange"></CartItem>
        </div>
        <Empty   v-else type="Cart"/>
      <Row class="bottom">
      <Col span="2"> <Checkbox v-model="allSelected"   @on-change="selectAll" size="large"></Checkbox></Col>
      <Col span="16">{{$t('已选')}} <span class="price">{{calcTotalPrice.total}}</span> {{$t('件商品')}}</Col>
      <Col span="6">
        <p>{{$t('总计')}} <span class="price">{{ $store.state.currency.currency_symbol || '$' }}{{calcTotalPrice.totalPrice}}</span></p>
        <div class="pay-btn" @click="cartSubmit">{{$t('立即结算')}}</div>
      </Col>
      </Row>
    </div>
  </div>
</template>

<script>
import { Search } from "@/components";
import CartItem from "./item.vue"
import { mapActions, mapState, mapMutations } from "vuex";
export default {
  name:'Cart',
  components:{
    Search,
    CartItem
  },
  data(){
    return {
      allSelected:false
    }
  },

  created(){
    this.getCartList({page:1})
  },
  computed:{
    ...mapState(['cartList']),
    getAllShopSelected(){
      const { cartList =[]} = this
      return cartList.map(res=>res.selected).every(e=>e)
    },
    calcTotalPrice(){
      const { cartList =[]} = this
      const _list = (cartList.map(res=>res.goodres).flat().filter(f=>f.selected) || [])
      console.log('====================================');
      console.log({_list});
      console.log('====================================');
      if(!_list.length) return {total:0,totalPrice:0}
      return {total:_list.length,totalPrice:_list.map(m=>m.shop_price*m.num).reduce((pre,next)=>pre+next)}
    }
  },
  watch:{
    getAllShopSelected:function(value){
      this.allSelected = value
    }
  },
  methods:{
    ...mapActions(['getCartList','actionAddressList']),
    ...mapMutations(['ADD_SHOPPING_CART']),
    getdelcart(cart_id){
      this.$Modal.confirm({
        title: '提示',
        content: '确认删除该商品吗？',
        onOk: async() => {
          const {status} = await this.$http.getdelcart({cart_id})
          if(status===200){
              this.getCartList({page:1}).then(cart=>{
                if(!cart.length){
                  this.allSelected = false
                }
              })
            }
        },
      });
    },
    selectAll(e){
      const {cartList} = this
      const _cartList = cartList.map(res=>{
        res.selected=e
        return res
      })
      this.ADD_SHOPPING_CART(_cartList)
    },
    async cartSubmit(){
      const {cartList} = this
      const cart_idres =( cartList.map(res=>res.goodres).flat().map(res=>res.id) || []).join(',')
      const {status,data={cart_idres}} =  await this.$http.getcartbuy({cart_idres})
      if(status===200){
        this.$router.push({path:'/Order',query:{cart_idres}})
      }
    },
   async cartNumChange(params){
      const {status} = await this.$http.geteditcart(params)
      if(status===200){
        this.getCartList()
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.settle{
  &-table{
    // background-color: #fff;
    margin-top: 20px;
  }
  &-title{
    background-color: #eee;
    padding: 15px 20px;
  }
}

.bottom{
  padding:20px 30px;
  background-color: #eee;
  margin-top: 20px;
  position: relative;
}
.pay-btn{
  position:absolute;
  right:-30px;
  top:-20px;
  background-color: #e2231a;
  padding:22px 50px;
  color:#fff
}
.price{
  font-weight: 500;
  color:#e2231a;
  font-size: 24px;
}
</style>
